import React, { FC, useEffect, useState } from 'react';
import {
  Row,
  Col,
  Typography,
  PageHeader,
  Spin,
  List,
  Avatar,
  Pagination,
} from 'antd';
import styles from './selected.less';
import { connect, ConnectProps, history, DjModelState, request } from 'umi';
interface PageProps extends ConnectProps {
  djModel: DjModelState;
  dispatch: any;
}
const { Text, Link } = Typography;

const data1 = [
  {
    title: 'Ant Design Title 1',
  },
];

const Selected: FC<PageProps> = (props: any) => {
  let { selectId } = props;
  const [recommend, setRecommend] = useState([]);
  const [radioHot, setRadioHot] = useState([]);
  const [limit, setLimit] = useState(20);
  const [totol, setTotol] = useState(0);
  const [offset, setOffset] = useState(1);
  const [loadingRecommend, setLoadingRecommend] = useState(false);
  const [loadingRadioHot, setLoadingRadioHot] = useState(false);

  let getRecommend = () => {
    setLoadingRecommend(true);
    request(`/dj/recommend/type?type=${selectId}`).then(res => {
      setRecommend(res.djRadios.filter((item: any, num: number) => num < 6));
      setLoadingRecommend(false);
    });
  };

  let getRadioHot = () => {
    setLoadingRadioHot(true);
    request(
      `dj/radio/hot?cateId=${selectId}&limit=${limit}&offset=${offset}`,
    ).then(res => {
      setRadioHot(res.djRadios);
      setTotol(res.count);
      setLoadingRadioHot(false);
    });
  };
  const changePagination = (page: number) => {
    setOffset(page);
    //getPlaylist()
  };
  const changeSize = (current: number, size: number) => {
    setLimit(size);
    //getPlaylist()
  };

  useEffect(() => {
    if (recommend.length == 0) {
      getRecommend();
    }
    getRadioHot();
  }, [limit, offset]);
  return (
    <div>
      <PageHeader
        className={styles.site_page_header}
        backIcon={false}
        title="优秀新电台"
      />
      <Spin spinning={loadingRecommend}>
        <Row gutter={16}>
          {recommend.map((data: any, index: number) => (
            <Col className="gutter-row" span={4} key={index}>
              <div className={styles.recommendItem}>
                <img src={data.picUrl} className={styles.recommendImg} />
                <Link>{data.name}</Link>
                <p className={styles.rcmdtext}>{data.rcmdtext}</p>
              </div>
            </Col>
          ))}
        </Row>
      </Spin>

      <br />
      <PageHeader
        className={styles.site_page_header}
        backIcon={false}
        title="电台排行榜"
      />

      <Spin spinning={loadingRadioHot}>
        <Row gutter={25}>
          {radioHot.map((data: any, index: number) => (
            <Col className="gutter-row" span={12} key={index}>
              <List itemLayout="horizontal">
                <List.Item
                  actions={[
                    <Text>共{data.programCount}期</Text>,
                    <Text>订阅{data.subCount}次</Text>,
                  ]}
                >
                  <List.Item.Meta
                    avatar={
                      <Avatar src={data.picUrl} shape="square" size={64} />
                    }
                    title={data.name}
                    description={data.rcmdtext}
                  />
                </List.Item>
              </List>
            </Col>
          ))}
        </Row>

        <div className={styles.pagination}>
          <Pagination
            total={totol}
            showTotal={(total, range) =>
              `${range[0]}-${range[1]} of ${total} items`
            }
            pageSize={limit}
            current={offset}
            onChange={page => {
              changePagination(page);
            }}
            onShowSizeChange={(current, size) => {
              changeSize(current, size);
            }}
          />
        </div>
      </Spin>
    </div>
  );
};

export default connect(({ djModel }: { djModel: DjModelState }) => ({
  djModel,
}))(Selected);
